/**
 * tab组件
 * @description 展示横向滚动数据，可控制自定义样式，支持大部分需求
 * @author 西格 <944423003@qq.om>
 * @license MIT
 * @property {Array}        list    tab的列表
 * @property {String}       gap     tab的间隔
 * @property {Boolean}      flex    是否flex:1, 适用于列表小于4的场景
 * @property {Boolean}      center  是否展示到中间
 * 
 * @example <my-tabs list="{{list}}" custom-class="my-nav-size-box" item-class="nav-item-class"></my-tabs>
 */
Component({
    properties: {
        list: {
            type: Array,
            value: []
        },
        gap: {
            type: String,
            value: '30rpx'
        },
        flex: {
            type: Boolean,
            value: false
        },
        center: {
            type: Boolean,
            value: false
        }
    },
    externalClasses: ['custom-class','item-class','dot-class'],
    data: {
        navIndex: 0,
        navBottomDotLeftSize: 10,
        rectSize: {width: 0, height: 0}
    },
    lifetimes: {
        attached() {
            this.changeNavPositionHandle()
        }
    },
    methods: {
        changeNavPositionHandle() {
            if(!this.properties.center) {
                // 查询选中的tab的样式
                wx.createSelectorQuery().in(this).select('.active-size-tab').boundingClientRect((elActive) => {
                    if(!elActive) return false
                    this.setData({rectSize: { width: elActive.width, height: elActive.height }})

                    // if(this.properties.center) const scrollX = rect.left - (wx.getSystemInfoSync().windowWidth - rect.width) / 2;
                    wx.createSelectorQuery().in(this).select('#scroll-box').boundingClientRect((elScrollBox) => {
                        this.setData({navBottomDotLeftSize: elActive?.left - elScrollBox?.left + elActive?.width / 2})
                    }).exec()
                }).exec()
            } else if(this.properties.center) {
                // 滚动选项到中间位置
                wx.createSelectorQuery().in(this).select('.active-size-tab').boundingClientRect((rect) => {
                    if (!rect) return;
                    // 需要变动的位置
                    
                    const scrollX = rect.left - (wx.getSystemInfoSync().windowWidth - rect.width) / 2;
                    wx.createSelectorQuery().in(this).select('#scroll-box').boundingClientRect((scbox) => {
                    if(!scbox) return;
                    const allScrollX = scrollX - scbox.left
                    this.setData({rectSize: {width: rect.width,height: rect.height}, navBottomDotLeftSize: scrollX - scbox.left + ((wx.getSystemInfoSync().windowWidth - rect.width) / 2 + rect?.width / 2) })

                    wx.createSelectorQuery().in(this).select('#scrollview').node().exec((res) => {
                        const scrollView = res[0].node;
                        scrollView.scrollTo({left: allScrollX <= 0 ? 0 : allScrollX,duration: 300})
                    })
                    }).exec()
                }).exec();
            }
        },
        changeNavIndex(e) {
            const index = e.currentTarget.dataset.index
            this.setData({navIndex: index},() => {
                this.changeNavPositionHandle()
            })
        }
    }
})
